<template>
  <div class="hospital">
    <div class="menu">
      <header>
        <el-icon><HomeFilled /></el-icon>
        <span>/ 医院信息</span>
      </header>
      <el-menu
          :default-active="$router.currentRoute.value.fullPath"
          class="el-menu-vertical-demo"
          :router="true"
      >
        <el-menu-item :index="`/hospital/reservation?hoscode=${hoscode}`">
          <el-icon><Calendar /></el-icon>
          <span>预约挂号</span>
        </el-menu-item>
        <el-menu-item :index="`/hospital/details?hoscode=${hoscode}`">
          <el-icon><Document /></el-icon>
          <span>医院详情</span>
        </el-menu-item>
        <el-menu-item :index="`/hospital/register?hoscode=${hoscode}`">
         <el-icon><Bell /></el-icon>
          <span>预约通知</span>
        </el-menu-item>
        <el-menu-item :index="`/hospital/close?hoscode=${hoscode}`">
          <el-icon>
            <InfoFilled/>
          </el-icon>
          <span>停诊信息</span>
        </el-menu-item>
        <el-menu-item :index="`/hospital/searchAndCancel?hoscode=${hoscode}`">
          <el-icon>
            <Search/>
          </el-icon>
          <span>查询/取消</span>
        </el-menu-item>

      </el-menu>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import {Bell, Calendar, Document, HomeFilled, InfoFilled, Search, Setting} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import useHospitalDetail from '@/store/modules/hospitalDetail'

// 引入路由对象
let $router = useRouter();
let hospitalStore = useHospitalDetail()
let hoscode = ref<string>('')
onMounted(() => {
  hoscode.value = $router.currentRoute.value.query.hoscode;
  hospitalStore.getHospital(hoscode.value)
})
</script>

<style scoped lang="less">
.hospital {
  display: flex;
  justify-content: space-between;

  .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 2;
    header {
      display: flex;
      justify-content: center;
      span {
        font-size: 16px;
        color: #000;
      }
    }
  }

  .content {
    flex: 8;
  }
}
</style>